<template>
  <div class="wrap">
    <div class="content">
      <div class="type-search" v-if="showPlanList.length > 1">
        <el-radio-group class="platform-radio" v-model="queryParams.type" size="small" @change="changeOption" :disabled="loading">
          <el-radio-button
            v-for="item in showPlanList"
            :label="item.label"
            :key="item.label"
          >{{item.text}}</el-radio-button>
        </el-radio-group>
      </div>

      <template v-if="queryParams.type === PLAN_TYPE_FL()">
        <shipping-plan-list1></shipping-plan-list1>
      </template>
      <template v-else-if="queryParams.type === PLAN_TYPE_MW()">
        <shipping-plan-list2></shipping-plan-list2>
      </template>
    </div>
  </div>
</template>

<script>
// import addShippingPlanMixin from "@/views/shipment/mixin/addShippingPlanMixin";
import {getPlanStatusStr, PLAN_TYPE_FL, PLAN_TYPE_MW, planTypeList} from "@/utils/shippingPlan";
import {getShippingPlanList} from "@/api/shippingPlan";
import shipmentList from "@/views/shipment/shipmentList.vue";
import {deepCopy} from "@/utils";
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";
import {ROLE_FL_OPERATE} from "@/utils/admin";
import ShippingPlanList1 from "@/views/shippingPlan/components/shippingPlanList1.vue";
import ShippingPlanList2 from "@/views/shippingPlan/components/shippingPlanList2.vue";

export default {
  name: 'shippingPlanList',
  components: {ShippingPlanList2, ShippingPlanList1},
  computed: {
    shipmentList() {
      return shipmentList
    },
    showPlanList(){
      if(this.$store.getters.roleType === ROLE_FL_OPERATE){
        return this.planTypeList.filter(item => item.label === PLAN_TYPE_FL)
      }else{
        return this.planTypeList
      }
    }
  },
  mixins: [],
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        warehouseId: 0,
        transferType: '',
        keyword: '',
        status: 'total',
        type: PLAN_TYPE_FL,
        userIds: [],
      },
      loading: false,
      total: 0,
      planTypeList,
      statusNum: {
        saved: 0,
        ready2Ship: 0,
        shipped: 0,
        finished: 0,
        total: 0,
      },
      tableData: [],
    }
  },
  created() {
  },
  methods: {
    PLAN_TYPE_MW() {
      return PLAN_TYPE_MW
    },
    PLAN_TYPE_FL() {
      return PLAN_TYPE_FL
    },
    getPlanStatusStr,
    getData() {

      this.loading = true
      getShippingPlanList(this.queryParams)
        .then(res => {
          this.loading = false
          this.tableData = res.data
          this.statusNum = deepCopy(res.info.statusNum)
          this.total = res.info.total
        })
    },
    changeOption() {
      this.queryParams.page = 1;
      // this.getData()
    },
    handleSizeChange(val) {
      this.queryParams.PageSize = val;
      this.queryParams.page = 1
      // this.getData();
    },
    jumpInfo(row) {
      this.$router.push({
        name: 'shippingPlanInfo',
        query: {
          id: row.id
        }
      })
    },
    getTransferName(transferType){
      const item = this.transferTypeList.find(item=> item.transferType === transferType)
      return item ? item.typeName : ''
    },
  },
}

</script>

<style scoped lang="scss">
.wrap {
  padding: 20px 30px;

  .content {
    .type-search {
      padding-bottom: 10px;
      border-bottom: 1px solid #cccccc;
    }

    .header-search {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>
